<template>
  <view>
    <view class="wrapper">
      <view class="text">PK</view>
      <view class="h3">{{ stem }}</view>
      <view v-if="!onlyOneData" class="pk-wrapper">
        <view class="left" :style="{
          width: `${leftContent.percent}%`,
          background: leftContent.percent === 0 ? `#8B98A9` : ''
        }">
          <view v-if="!leftContent.first" class="span">
            {{ Math.round(leftContent.percent) }}%
          </view>
          <view class="optionName" :style="{width: (leftContent.percent === 0) ? '104px' : `${leftContent.percent}%`}">
            {{ leftContent.optionName }}
            <view v-if="showLeftOrRight === 'left'" style="display: inline-block">(已选)</view>
          </view>
          <img v-if="leftContent.percent === 0" class="center-img" src="../images/left.png" alt="img">
          <img v-if="rightContent.percent === 0" class="center-img" src="../images/right.png" alt="img">
          <img v-if="leftContent.percent !== 0 && rightContent.percent !== 0" class="center-img"
            src="../images/center.png" alt="img">
        </view>
        <view class="right" :style="{
          width: `${rightContent.percent}%`,
          background: rightContent.percent === 0 ? `#8B98A9` : ''
        }">
          <view v-if="!rightContent.first" class="span">
            {{ Math.round(rightContent.percent) }}%
          </view>
          <view class="optionName"
            :style="{width: (rightContent.percent === 0) ? '104rpx' : `${rightContent.percent}%`}">
            {{ rightContent.optionName }}
            <view v-if="showLeftOrRight === 'right'" style="display: inline-block">(已选)</view>
          </view>
        </view>
      </view>
      <view v-if="showLeftOrRight === 'left' && onlyOneData" class="only-one-data-left">
        <view class="num">100%</view>
        <view class="span">{{ leftContent.optionName }}(已选)</view>
      </view>
      <view v-if="showLeftOrRight === 'right' && onlyOneData" class="only-one-data-right">
        <view class="num">100%</view>
        <view>{{ rightContent.optionName }}(已选)</view>
      </view>
      <view class="vote-button" v-if="(answerFlag === false) && (showVoteBtn && !isFinish)">
        <view class="vote-button-left" @click="handleClick('left')">
          投票
        </view>
        <view class="vote-button-right" @click="handleClick('right')">
          投票
        </view>
      </view>
    </view>
    <view class="expiration-date">
      <view class="span">* </view>
      <view v-if="isFinish" class="text">
        本次PK已结束
      </view>
      <view v-else class="text">
        将于 {{ endTime }} 截止
      </view>
    </view>
  </view>
</template>


<script>
const ShowOrRight = {
  left: 'left',
  right: 'right'
}
export default {
  props: {
    endTime: {
      type: String,
      default: ''
    },
    pkQuestionInfo: {},
    endFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: '',
      stem: '',
      showLeftOrRight: '',
      answerFlag: false,
      leftContent: {},
      rightContent: {},
      isFinish: false,
      onlyOneData: false,
      showVoteBtn: true,
      sum: 0,
      id: 0,
    }
  },
  onLoad() {

  },
  methods: {
    handleClick(type) {
      // if (!getLoginStatus()) {

      // 	return;
      // }
      this.showVoteBtn = false;
      if (type === ShowOrRight.left) {
        this.showLeftOrRight = ShowOrRight.left;
        this.sum += 1;
        this.leftContent = {
          ...this.leftContent,
          percent: ((this.leftContent.userCount + 1) / this.sum) * 100,
        };
        this.rightContent = {
          ...this.rightContent,
          percent: ((this.rightContent.userCount) / this.sum) * 100,
        };
        if (this.rightContent.userCount === 0) {
          this.onlyOneData = true;
          this.showLeftOrRight = ShowOrRight.left;
        }
        this.sumbitData(this.leftContent.id);
      } else if (type === ShowOrRight.right) {
        this.showLeftOrRight = ShowOrRight.right;
        this.sum += 1;
        this.rightContent = {
          ...this.rightContent,
          percent: ((this.rightContent.userCount + 1) / this.sum) * 100,
        };
        this.leftContent = {
          ...this.leftContent,
          percent: ((this.leftContent.userCount) / this.sum) * 100,
        };
        if (this.leftContent.userCount === 0) {
          this.onlyOneData = true;
          this.showLeftOrRight = ShowOrRight.right;
        }
        this.sumbitData(this.rightContent.id);
      }
    },

    sumbitData(submitId) {
      // 提交信息
    }
  },
  mounted() {
    const {
      choiceInfoVos,
      stem,
      answerFlag,
      id,
      answerUserCount
    } = this.pkQuestionInfo;
    this.onlyOneData = false;
    this.isFinish = this.endFlag;
    this.sum = answerUserCount;
    this.stem = stem;
    this.id = id;
    this.answerFlag = answerFlag;
    let array = [];
    // sumCount为 0，代表该组数据无人作答
    array = this.sum === 0 ? choiceInfoVos.map((dataItem) => {
      return {
        ...dataItem,
        optionName: dataItem.content,
        percent: 50,
        userCount: 0,
        first: true
      };
    }) : choiceInfoVos.map((dataItem) => {
      return {
        ...dataItem,
        optionName: dataItem.content,
        percent: (dataItem.userCount / this.sum) * 100,
        userCount: dataItem.userCount,
        first: false
      };
    });

    this.leftContent = array[0];
    this.rightContent = array[1];

    if (answerFlag === true) {
      if (array[0].selectFlag === true) {
        this.showLeftOrRight = ShowOrRight.left;
      }
      if (array[1].selectFlag === true) {
        this.showLeftOrRight = ShowOrRight.right;
      }
    }
  }
}
</script>

<style lang="less">
.wrapper {
  width: 100%;
  background: #f8f9fb;
  border-radius: 16rpx;
  padding: 48rpx 24rpx;
  box-sizing: border-box;

  .text {
    width: 66rpx;
    height: 40rpx;
    background: #f0f3f7;
    border-radius: 8rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #3f60fc;
    margin-bottom: 16rpx;
    line-height: 40rpx;
  }

  .h3 {
    font-size: 36rpx;
    font-weight: 500;
    color: #07132b;
    margin-bottom: 64rpx;
    margin-top: 16rpx;
  }

  .pk-wrapper {
    width: 100%;
    height: 104rpx;
    display: flex;
    position: relative;

    .left,
    .right {
      height: 104rpx;
      min-width: 207rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 44rpx;
      align-items: center;

      .span {
        font-size: 32rpx;
        font-weight: 600;
      }

      .optionName {
        min-width: 208rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .left {
      background-color: #3f60fc;
      border-top-left-radius: 60rpx;
      border-bottom-left-radius: 60rpx;
      position: relative;

      .center-img {
        position: absolute;
        right: -36rpx;
        top: 0rpx;
        height: 104rpx;
        width: 72rpx;
      }
    }

    .right {
      background-color: #ff4053;
      border-top-right-radius: 60rpx;
      border-bottom-right-radius: 60rpx;
    }
  }

  .only-one-data-left,
  .only-one-data-right {
    width: 100%;
    height: 104rpx;
    border-radius: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 12px;
    color: #ffffff;

    .num {
      font-size: 16px;
      font-weight: 600;
    }
  }

  .only-one-data-left {
    background: #3f60fc;
  }

  .only-one-data-right {
    background: #ff4053;
  }

  .vote-button {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    padding: 0px 16rpx;

    .vote-button-left,
    .vote-button-right {
      width: 280rpx;
      height: 56rpx;
      border-radius: 16rpx;
      font-size: 24rpx;
      font-weight: 400;
      text-align: center;
      line-height: 56rpx;
    }

    .vote-button-left {
      border: 2rpx solid #3f60fc;
      color: #3f60fc;
    }

    .vote-button-right {
      border: 2rpx solid #ff4053;
      color: #ff4053;
    }
  }
}

.expiration-date {
  margin-left: 16rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #babcc5;
  display: flex;
  margin-top: 32rpx;

  .span {
    color: #ff4053;
    margin-right: 4rpx;
  }
}
</style>
